<template>
  <div class="log-page">
    <transition name="fade">
      <div class="erroe-msg flex-box" v-show="msgBox">
        <p>{{msg}}</p>
      </div>
    </transition>
    <div class="log-main">
      <h3>手机验证码登录</h3>
      <ul>
        <li class="input-box flex-box">
          <div>
            <span><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-quanjiyin-phone"></use>
            </svg></span>
            <input type="text" id="tel-num" v-model="telNumber" placeholder="请输入手机号">
          </div>
        </li>
        <li class="input-box flex-box">
          <div>
            <span><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-quanjiyin-safex"></use>
            </svg></span>
            <input type="text" id="pass-num" v-model="password" placeholder="点击获取验证码">
            <button @click="onEnter" class="active">获取验证码</button>
          </div>
        </li>
      </ul>
      <button @click="logIn" class="commit active">登录</button>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { mapActions, mapState } from "vuex";
const STORAGE_KEY = "logMsg";
export default {
  name: "articleList",
  data() {
    return {
      msg: "",
      msgBox: false,
      telNumber: "",
      password: "",
      userInfo: "",
      lists: this.$localStorage.fetch(STORAGE_KEY)
    };
  },
  computed: {
    ...mapState(["isLogin", "logPhoneNum"])
  },
  watch: {
    lists: {
      handler: function(lists) {
        this.$localStorage.save(STORAGE_KEY, lists);
      },
      deep: true
    }
  },
  methods: {
    ...mapActions(["loginAction", "setPhoneNum"]),
    msgOut(msg, time) {
      this.msg = msg;
      this.msgBox = true;
      setTimeout(() => {
        this.msgBox = false;
      }, time * 1000);
    },
    onEnter() {
      if (!/^1\d{10}$/.test(this.telNumber)) {
        this.msgOut("请输入正确手机号码", 2);
      } else {
        $.ajax({
          type: "POST",
          dataType: "JSON",
          data: { phoneNum: this.telNumber },
          url:
            this.$API.api +
            "/report/?i=3&c=entry&m=nifty&do=mobile&d=login&f=getVerifyCode",
          success: result => {
            console.log(result);
            if (result.res) {
              this.msgOut("验证码已发送到手机，请注意查收", 2);
            } else {
              this.msgOut("请勿频繁操作", 2);
            }
          }
        });
      }
    },
    logIn() {
      if (!/^1\d{10}$/.test(this.telNumber)) {
        this.msgOut("请输入正确手机号码", 2);
      } else if (this.password === "") {
        this.msgOut("请输入手机验证码", 2);
      } else {
        $.ajax({
          type: "POST",
          dataType: "JSON",
          data: { phoneNum: this.telNumber, verifyNum: this.password },
          url:
            this.$API.api +
            "/report/?i=3&c=entry&m=nifty&do=mobile&d=login&f=login",
          success: result => {
            console.log(result);
            this.loginAction(1);
            if (result.res) {
              this.lists = result.phoneNum;
              this.setPhoneNum(this.telNumber);
              // console.log(this.$localStorage.fetch(STORAGE_KEY));
              let redirect = this.$route.query.redirect;
              if (redirect) {
                this.$router.push(redirect);
              } else {
                this.$router.push("/sjlists");
              }
            } else {
              this.msgOut("验证码错误或已过期", 2);
            }
          },
          error: function(err) {
            console.log(err);
            this.msgOut("验证码错误或已过期", 2);
          }
        });
      }
    }
  },
  mounted() {
    // window.localStorage.removeItem("logMsg");
    // console.log(window.localStorage);
    // this.loginAction(1);
    // this.$router.push("/sjlists");
    // console.log(this.$API.api);
    if (this.$store.state.isLogin === 1) {
      let redirect = this.$route.query.redirect;
      if (redirect) {
        this.$router.push(redirect);
      } else {
        this.$router.push("/sjlists");
      }
    }
  }
};
</script>

<style scoped lang="scss">
.log-page {
  width: 100%;
  h3 {
    font-size: r(26);
    color: #595a5a;
    letter-spacing: 1.44px;
    margin-top: r(48);
    margin-bottom: r(42);
  }
  .erroe-msg {
    width: 100%;
    height: r(40);
    font-size: r(14);
    color: #fff;
    letter-spacing: 0;
    background: -webkit-linear-gradient(left, #fa9973, #fa7386);
    background: linear-gradient(to right, #fa9973, #fa7386);
  }
  .log-main {
    width: 100%;
    padding-left: r(15);
    padding-right: r(15);
    box-sizing: border-box;
    .input-box {
      span {
        font-size: r(24);
        display: block;
        float: left;
        color: #9e9e9e;
        margin-top: r(4);
      }
      input {
        width: r(200);
        float: left;
        margin-left: r(8);
        margin-top: r(4);
      }
      button {
        width: r(100);
        height: r(32);
        border-radius: 100px;
        float: right;
        border: none;
        outline: none;
        font-size: r(14);
        color: #fff;
        &.active {
          background: #66b9fe;
        }
      }
    }
    .commit {
      margin-top: r(32);
    }
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.35s;
    opacity: 1;
    height: r(40);
  }
  .fade-enter,
  .fade-leave-to {
    opacity: 0;
    height: 0;
  }
}
</style>
